<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    </style>
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="../bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../jquery/jquery-3.7.0.min.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/banner.js"></script>
    <script src="../js/api/bannerApi.js"></script>
    <style>
        body, html, main {
            width: 100%;
            height: 104%;
        }
        .imgMatrix {
            width: 100px;
            height: 100px;
        }

        .imgHeng {
            content: '';
            position: relative;
            margin-left: 25%;
            margin-top: 50%;
            width: 130px;
            height: 2px;
            border-top: solid 1px;
        }

        .imgShu {
            content: '';
            position: relative;
            margin-left: 50%;
            margin-top: -25%;
            width: 2px;
            height: 130px;
            border-left: solid 1px;
        }

        #imgMatrix {
            width: 100px;
            height: 100px;
        }

        #imgHeng {
            content: '';
            position: relative;
            margin-left: 25%;
            margin-top: 50%;
            width: 50px;
            height: 2px;
            border-top: solid 1px;
        }

        #imgShu {
            content: '';
            position: relative;
            margin-left: 50%;
            margin-top: -25%;
            width: 2px;
            height: 50px;
            border-left: solid 1px;
        }
    </style>

</head>
<body>
<main class="page-wrapper bg-body-secondary">
    <div class="container py-4" style="max-width: 1400px">
        <!-- Page title -->
        <div class="page-header d-print-none">
            <div class="row align-items-center">
                <div class="col">
                    <!-- Page pre-title -->
                    <div class="page-pretitle">
                        欢迎回来
                    </div>
                    <h2 class="page-title">
                        Mall后台管理系统
                    </h2>
                </div>
                <!-- Page title actions -->
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <a href="#" class="btn btn-primary d-none d-sm-inline-block" data-bs-toggle="modal"
                           data-bs-target="#modal-report">
                            前往前台
                        </a>
                        <a href="#" class="btn btn-primary d-sm-none btn-icon" data-bs-toggle="modal"
                           data-bs-target="#modal-report" aria-label="Create new report">
                            <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                 viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                 stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                <line x1="12" y1="5" x2="12" y2="19"></line>
                                <line x1="5" y1="12" x2="19" y2="12"></line>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body">
        <div class="container" style="max-width: 1400px">
            <div class="row row-deck row-cards">
                <div class="col-sm-6 col-lg-3">
                    <div class="card ">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="subheader">累计销售额</div>
                                <div class="ms-auto lh-1">
                                    <div class="dropdown">
                                        <a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown"
                                           aria-haspopup="true" aria-expanded="false">7天内</a>
                                        <div class="dropdown-menu dropdown-menu-end" style="">
                                            <a class="dropdown-item active" href="#">7天内</a>
                                            <a class="dropdown-item" href="#">30天内</a>
                                            <a class="dropdown-item" href="#">3个月内</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex align-items-baseline">
                                <div class="h1 mb-3 me-2">123,986元</div>
                                <div class="me-auto ms-auto">
                                    <img src="../img/jine.png" style="height: 50px; width: 50px">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="card ">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="subheader">新用户数量</div>
                                <div class="ms-auto lh-1">
                                    <div class="dropdown">
                                        <a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown"
                                           aria-haspopup="true" aria-expanded="false">7天内</a>
                                        <div class="dropdown-menu dropdown-menu-end" style="">
                                            <a class="dropdown-item active" href="#">7天内</a>
                                            <a class="dropdown-item" href="#">30天内</a>
                                            <a class="dropdown-item" href="#">3个月内</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex align-items-baseline">
                                <div class="h1 mb-3 me-2">2,986</div>
                                <div class="me-auto ms-auto">
                                    <img src="../img/rshu.png" style="height: 50px; width: 60px">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="card ">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="subheader">购物车加购次数</div>
                                <div class="ms-auto lh-1">
                                    <div class="dropdown">
                                        <a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown"
                                           aria-haspopup="true" aria-expanded="false">7天内</a>
                                        <div class="dropdown-menu dropdown-menu-end" style="">
                                            <a class="dropdown-item active" href="#">7天内</a>
                                            <a class="dropdown-item" href="#">30天内</a>
                                            <a class="dropdown-item" href="#">3个月内</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex align-items-baseline">
                                <div class="h1 mb-3 me-2">4,931</div>
                                <div class="me-auto ms-auto">
                                    <img src="../img/gouwuche.png" style="height: 50px; width: 60px">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="card ">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="subheader">订单确认次数</div>
                                <div class="ms-auto lh-1">
                                    <div class="dropdown">
                                        <a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown"
                                           aria-haspopup="true" aria-expanded="false">7天内</a>
                                        <div class="dropdown-menu dropdown-menu-end" style="">
                                            <a class="dropdown-item active" href="#">7天内</a>
                                            <a class="dropdown-item" href="#">30天内</a>
                                            <a class="dropdown-item" href="#">3个月内</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex align-items-baseline">
                                <div class="h1 mb-3 me-2">37,931</div>
                                <div class="me-auto ms-auto">
                                    <img src="../img/quer.png" style="height: 50px; width: 50px">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-12">
                    <div class="card my-4">
                        <div class="card-header">
                            <h3 class="card-title">轮播图管理</h3>
                        </div>
                        <div class="table-responsive" style="max-width: 1400px">
                            <div class="table card-table container">
                                <div id="bannerBody" class="row mt-3" style="height: 600px">
                                    <div class="col-3 ">
                                        <label data-bs-toggle="modal" data-bs-target="#itemModal" data-bs-type="show" id="productImgLabel-1" style="height: 80%; width: 100%">
                                            <div class="imgMatrix border border-dark" style="height: 100%; width : 100%; display: none">
                                                <div class="imgHeng"></div>
                                                <div class="imgShu"></div>
                                            </div>
                                            <div class="bg-light card" style="height: 100%;width: 100%" >
                                                <img src="http://localhost:8080/upload/1687716486458IMG_20230322_170729.jpg" class="" style="max-height: 100%; max-width: 100%;">
                                            </div>
                                        </label>
                                        <div class="row pt-0">
                                            <span class="col-6 form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault">是否显示</label>
                                            </span>
                                            <span class="col-3 dropdown ms-auto me-4">
                                              <button class="btn dropdown-toggle pt-0" data-bs-boundary="viewport"
                                                      data-bs-toggle="dropdown">操作</button>
                                                <ul class="dropdown-menu dropdown-menu-start"
                                                    style="min-width: 1px;">
                                                    <li>
                                                        <button class="dropdown-item" type="button">编辑</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item" type="button">删除</button>
                                                    </li>
                                                </ul>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-3 ">
                                        <label data-bs-toggle="modal" data-bs-target="#itemModal" data-bs-type="add" id="productImgLabel-1" style="height: 80%; width: 100%">
                                            <div class="imgMatrix border border-dark" style="height: 100%; width : 100%; display: none">
                                                <div class="imgHeng"></div>
                                                <div class="imgShu"></div>
                                            </div>
                                            <div class="bg-light card" style="height: 100%;width: 100%" >
                                                <img src="http://localhost:8080/upload/1687716486458IMG_20230322_170729.jpg" class="" style="max-height: 100%; max-width: 100%;">
                                            </div>
                                        </label>
                                        <div class="row pt-0">
                                            <span class="col-6 form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault">是否显示</label>
                                            </span>
                                            <span class="col-3 dropdown ms-auto me-4">
                                              <button class="btn dropdown-toggle pt-0" data-bs-boundary="viewport"
                                                      data-bs-toggle="dropdown">操作</button>
                                                <ul class="dropdown-menu dropdown-menu-start"
                                                    style="min-width: 1px;">
                                                    <li>
                                                        <button class="dropdown-item" type="button">编辑</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item" type="button">删除</button>
                                                    </li>
                                                </ul>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-3 ">
                                        <label data-bs-toggle="modal" data-bs-target="#itemModal" data-bs-type="add" id="productImgLabel-1" style="height: 80%; width: 100%">
                                            <div class="imgMatrix border border-dark" style="height: 100%; width : 100%; display: none">
                                                <div class="imgHeng"></div>
                                                <div class="imgShu"></div>
                                            </div>
                                            <div class="bg-light card" style="height: 100%;width: 100%" >
                                                <img src="http://localhost:8080/upload/1687716486458IMG_20230322_170729.jpg" class="" style="max-height: 100%; max-width: 100%;">
                                            </div>
                                        </label>
                                        <div class="row pt-0">
                                            <span class="col-6 form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault">是否显示</label>
                                            </span>
                                            <span class="col-3 dropdown ms-auto me-4">
                                              <button class="btn dropdown-toggle pt-0" data-bs-boundary="viewport"
                                                      data-bs-toggle="dropdown">操作</button>
                                                <ul class="dropdown-menu dropdown-menu-start"
                                                    style="min-width: 1px;">
                                                    <li>
                                                        <button class="dropdown-item" type="button">编辑</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item" type="button">删除</button>
                                                    </li>
                                                </ul>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-3 ">
                                        <label data-bs-toggle="modal" data-bs-target="#itemModal" data-bs-type="add" id="productImgLabel-1" style="height: 80%; width: 100%">
                                            <div class="imgMatrix border border-dark" style="height: 100%; width : 100%; display: none">
                                                <div class="imgHeng"></div>
                                                <div class="imgShu"></div>
                                            </div>
                                            <div class="bg-light card" style="height: 100%;width: 100%" >
                                                <img src="http://localhost:8080/upload/1687716486458IMG_20230322_170729.jpg" class="" style="max-height: 100%; max-width: 100%;">
                                            </div>
                                        </label>
                                        <div class="row pt-0">
                                            <span class="col-6 form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault">是否显示</label>
                                            </span>
                                            <span class="col-3 dropdown ms-auto me-4">
                                              <button class="btn dropdown-toggle pt-0" data-bs-boundary="viewport"
                                                      data-bs-toggle="dropdown">操作</button>
                                                <ul class="dropdown-menu dropdown-menu-start"
                                                    style="min-width: 1px;">
                                                    <li>
                                                        <button class="dropdown-item" type="button">编辑</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item" type="button">删除</button>
                                                    </li>
                                                </ul>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-3 ">
                                        <label data-bs-toggle="modal" data-bs-target="#itemModal" data-bs-type="add" id="productImgLabel-1" style="height: 80%; width: 100%">
                                            <div class="imgMatrix border border-dark" style="height: 100%; width : 100%; display: none">
                                                <div class="imgHeng"></div>
                                                <div class="imgShu"></div>
                                            </div>
                                            <div class="bg-light card" style="height: 100%;width: 100%" >
                                                <img src="http://localhost:8080/upload/1687716486458IMG_20230322_170729.jpg" class="" style="max-height: 100%; max-width: 100%;">
                                            </div>
                                        </label>
                                        <div class="row pt-0">
                                            <span class="col-6 form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault">是否显示</label>
                                            </span>
                                            <span class="col-3 dropdown ms-auto me-4">
                                              <button class="btn dropdown-toggle pt-0" data-bs-boundary="viewport"
                                                      data-bs-toggle="dropdown">操作</button>
                                                <ul class="dropdown-menu dropdown-menu-start"
                                                    style="min-width: 1px;">
                                                    <li>
                                                        <button class="dropdown-item" type="button">编辑</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item" type="button">删除</button>
                                                    </li>
                                                </ul>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-3 ">
                                        <label data-bs-toggle="modal" data-bs-target="#itemModal" data-bs-type="add" id="productImgLabel-1" style="height: 80%; width: 100%">
                                            <div class="imgMatrix border border-dark" style="height: 100%; width : 100%; display: none">
                                                <div class="imgHeng"></div>
                                                <div class="imgShu"></div>
                                            </div>
                                            <div class="bg-light card" style="height: 100%;width: 100%" >
                                                <img src="http://localhost:8080/upload/1687716486458IMG_20230322_170729.jpg" class="" style="max-height: 100%; max-width: 100%;">
                                            </div>
                                        </label>
                                        <div class="row pt-0">
                                            <span class="col-6 form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault">是否显示</label>
                                            </span>
                                            <span class="col-3 dropdown ms-auto me-4">
                                              <button class="btn dropdown-toggle pt-0" data-bs-boundary="viewport"
                                                      data-bs-toggle="dropdown">操作</button>
                                                <ul class="dropdown-menu dropdown-menu-start"
                                                    style="min-width: 1px;">
                                                    <li>
                                                        <button class="dropdown-item" type="button">编辑</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item" type="button">删除</button>
                                                    </li>
                                                </ul>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-3 ">
                                        <label data-bs-toggle="modal" data-bs-target="#itemModal" data-bs-type="add" id="productImgLabel-1" style="height: 80%; width: 100%">
                                            <div class="imgMatrix border border-dark" style="height: 100%; width : 100%; display: none">
                                                <div class="imgHeng"></div>
                                                <div class="imgShu"></div>
                                            </div>
                                            <div class="bg-light card" style="height: 100%;width: 100%" >
                                                <img src="http://localhost:8080/upload/1687716486458IMG_20230322_170729.jpg" class="" style="max-height: 100%; max-width: 100%;">
                                            </div>
                                        </label>
                                        <div class="row pt-0">
                                            <span class="col-6 form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault">是否显示</label>
                                            </span>
                                            <span class="col-3 dropdown ms-auto me-4">
                                              <button class="btn dropdown-toggle pt-0" data-bs-boundary="viewport"
                                                      data-bs-toggle="dropdown">操作</button>
                                                <ul class="dropdown-menu dropdown-menu-start"
                                                    style="min-width: 1px;">
                                                    <li>
                                                        <button class="dropdown-item" type="button">编辑</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item" type="button">删除</button>
                                                    </li>
                                                </ul>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-3 ">
                                        <label data-bs-toggle="modal" data-bs-target="#itemModal" data-bs-type="add" id="productImgLabel-1" style="height: 80%; width: 100%">
                                            <div class="imgMatrix border border-dark" style="height: 100%; width : 100%; display: none">
                                                <div class="imgHeng"></div>
                                                <div class="imgShu"></div>
                                            </div>
                                            <div class="bg-light card" style="height: 100%;width: 100%" >
                                                <img src="http://localhost:8080/upload/1687716486458IMG_20230322_170729.jpg" class="" style="max-height: 100%; max-width: 100%;">
                                            </div>
                                        </label>
                                        <div class="row pt-0">
                                            <span class="col-6 form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault">是否显示</label>
                                            </span>
                                            <span class="col-3 dropdown ms-auto me-4">
                                              <button class="btn dropdown-toggle pt-0" data-bs-boundary="viewport"
                                                      data-bs-toggle="dropdown">操作</button>
                                                <ul class="dropdown-menu dropdown-menu-start"
                                                    style="min-width: 1px;">
                                                    <li>
                                                        <button class="dropdown-item" type="button">编辑</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item" type="button">删除</button>
                                                    </li>
                                                </ul>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer d-flex align-items-center">
                            <p class="m-0 text-muted">Rotation chart</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 id="modalTitle" class="modal-title fs-5" id="exampleModalLabel">商品</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="bannerForm">
                    <div class="mb-3">
                        <div class="mb-2" style="">图片:</div>
                        <label id="bannerImgLabel" for="bannerImgUrl" class="col-form-label">
                            <div id="imgMatrix" class="border border-dark">
                                <div id="imgHeng"></div>
                                <div id="imgShu"></div>
                            </div>
                        </label>
                        <input type="file" class="" id="bannerImgUrl" style="display: none">
                    </div>
                    <div class="mb-3">
                        <input type="text" id="bannerId" style="display: none">
                        <label for="bannerUrl" class="col-form-label">地址:</label>
                        <input type="text" class="form-control" id="bannerUrl">
                    </div>
                    <div class="mb-3">
                        <label for="bannerDescription" class="col-form-label">描述:</label>
                        <textarea type="text" class="form-control" id="bannerDescription"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" onclick="resetBannerForm()" class="btn btn-info">清空</button>
                <button id="modalClose" type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消
                </button>
                <button id="modalSubmit" type="button" class="btn btn-primary">Send message</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="showModalLabel">轮播图</h1>
            </div>
            <div class="modal-body">
                <form id="bannerShowForm">
                    <div class="mb-3">
                        <div class="mb-2" style="">图片:</div>
                        <label id="bannerShowImgLabel" class="col-form-label">
                            <img id="showImg" alt="图片" class="border border-dark" src="" style="width: 103px;height: 103px;margin-top: -10px">
                        </label>
                    </div>
                    <div class="mb-3">
                        <label for="bannerShowUrl" class="col-form-label">链接地址:</label>
                        <input type="text" class="form-control" id="bannerShowUrl" disabled>
                    </div>
                    <div class="mb-3">
                        <label for="bannerShowCreator" class="col-form-label">创建人:</label>
                        <input type="text" class="form-control" id="bannerShowCreator" disabled>
                    </div>
                    <div class="mb-3">
                        <label for="bannerShowUpdateTime" class="col-form-label">修改时间:</label>
                        <input type="text" class="form-control" id="bannerShowUpdateTime" disabled>
                    </div>
                    <div class="mb-3">
                        <label for="bannerShowCreateTime" class="col-form-label">创建时间:</label>
                        <input type="text" class="form-control" id="bannerShowCreateTime" disabled>
                    </div>
                    <div class="mb-3">
                        <label for="bannerShowDescription" class="col-form-label">描述:</label>
                        <textarea type="text" class="form-control" id="bannerShowDescription" disabled></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="showModalClose" type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


<script>
    $(function () {
        initBanner();
    })
</script>

</body>
</html>